<template>
  <div class="open-index-wrapper">
    <section
      class="service-info-box"
      v-for="(list, key) in valueAddedList"
      :key="key"
      @click="toOtherPage(key, list)"
    >
      <div class="info-item">
        <i class="info-icon icon-ic_value_add" :class="{ active: list.length > 0 }"></i>
        <span class="info-txt">{{ key }}</span>
        <span class="info-status" v-if="list.length === 0">未开通</span>
        <el-dropdown v-else>
          <span class="info-status active">已开通</span>
          <el-dropdown-menu slot="dropdown" class="dark-theme opened-list">
            <el-dropdown-item v-for="(item, index) in list" :key="index">{{ item }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: "otherServiceOpenIndex",

  data() {
    return {
      dataUrlObj: {
        // '线上支付': '/other_service/onlinePayment'
        线上支付: "onlinePayment"
      },

      valueAddedList: {}
    };
  },
  mounted() {
    this.getList();
  },

  methods: {
    getList() {
      let params = {
        operatorId: window.sessionStorage.getItem("_operatorID")
      };
      API.fetchGet("/valueAdded/getOperatorValueAddedStatusInfo", params).then(
        data => {
          this.valueAddedList = data;
        },
        err => {
          this.valueAddedList = {};
        }
      );
    },

    toOtherPage(key, list) {
      let dataUrlObj = this.dataUrlObj;
      let len = list.length;
      let _index = len > 0 ? 1 : 0;
      let serviceType = "";

      // /other_service/static_page' --- 静态页面URL地址
      // let url = '/other_service/static_page'
      let urlName = "staticPage";

      if (key == "线上支付") {
        urlName = dataUrlObj[key];
      }

      switch (key) {
        case "电子优惠券":
          serviceType = 0;
          break;
        case "电子发票":
          serviceType = 1;
          break;
        case "活动优惠":
          serviceType = 2;
          break;
        case "车场积分对接":
          serviceType = 3;
          break;
        case "优惠抵扣对接":
          serviceType = 4;
          break;
        case "反向寻车":
          serviceType = 5;
          break;
        case "远程值班":
          serviceType = 6;
          break;
        case "移动盘点":
          serviceType = 7;
          break;
        case "车位共享":
          serviceType = 8;
          break;
        case "车位预订":
          serviceType = 9;
          break;
      }

      this.$router.push({
        name: urlName,
        params: {
          serviceType: serviceType,
          name: key,
          list: list
        }
      });
    }
  }

  // activated() {
  //   this.getList()
  // }
};
</script>

<style lang="less" scoped>
@import "../../assets/less/base/variables.less";
.open-index-wrapper {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  padding: 0 20px;
  background-color: #fff;

  .service-info-box {
    background-color: @greyF8;
  }
}
.service-info-box {
  width: 310px;
  height: 130px;
  padding-top: 20px;
  padding-left: 10px;
  margin-right: 50px;
  margin-bottom: 30px;
  background-color: @greyF8;
  border-radius: 10px;
  border: 1px solid @lightBorderColor;
  background: url("../../assets/img/addvalued_card.png") no-repeat right bottom;
  background-size: 40%;
  cursor: pointer;
}
.info-item {
  display: flex;
  align-items: center;
  .info-txt {
    flex: 1;
    display: inline-block;
    color: @grey66;
    font-size: 16px;
    cursor: pointer;
  }

  .info-icon {
    font-size: 28px;
    color: @grayD2;
    margin-right: 8px;

    &.active {
      color: @lightGreen;
    }
  }

  .info-status {
    display: inline-block;
    height: 22px;
    line-height: 22px;
    padding-left: 12px;
    padding-right: 8px;
    border-radius: 20px 0 0 20px;
    background-color: @greyAE;
    color: #fff;
    font-size: 8px;

    &.active {
      background-color: @lightGreen;
      cursor: pointer;
    }
  }
}

.pointer {
  cursor: pointer;
}
</style>

<style lang="less">
.el-popper.opened-list {
  max-height: 450px;
  overflow-y: scroll;
}
</style>
